<template>
	<div class="user-container">
		<NavbarTop></NavbarTop>
		<div class="w">
			<div class="main-l">
				<ul>
					<li v-for="(item, index) in navList" :class="{ active: route.query.leftnav == index.toString() }" :key="index">
						<router-link :to="{ query: { leftnav: index } }">{{ navList[index] }}</router-link>
					</li>
				</ul>
			</div>
			<div class="main">
				<component :is="mainComponentsArray[Number(route.query.leftnav) || 0]"></component>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import NavbarTop from "./components/navbarTop.vue";
import HomePage from "./components/main/0-homePage.vue";

const route = useRoute();
const navList = ["首页", "我的收藏", "我的赞"];
//批量导入main下的所有组件
const mainComponents = import.meta.glob("./components/main/*.vue");
const mainComponentsArray: Array<any> = [HomePage];
Object.values(mainComponents).forEach((item, index) => {
	item().then(res => {
		mainComponentsArray[index] = res.default;
	});
});
</script>

<style scoped lang="scss">
.user-container {
	background: url(@/assets/images/body_bg.jpg) no-repeat top center #b4daef;
	overflow-x: hidden;
}
.w {
	padding-top: 50px;
	height: calc(100vh - 50px);
}
.main-l {
	width: 150px;
	position: fixed;
	padding-top: 10px;

	li {
		a {
			display: block;
			color: white;
			font-size: 14px;
			font-weight: bold;
			padding: 0 0 0 15px;
			height: 34px;
			line-height: 34px;
		}
		a:hover {
			background-color: rgba(255, 255, 255, 0.2);
			color: white !important;
		}
	}
}
.main {
	padding-top: 10px;
	padding-left: 150px;
	background-color: rgba(70, 149, 194, 0.3);
	min-height: calc(100vh - 50px);
}
.active {
	background-color: rgba(255, 255, 255, 0.2);
	color: white !important;
}
</style>
